<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 700px;
                height: 700px;
                background-color: green;
                display: flex;
                /* justify-content: center; */
                /* justify-content: flex-end; */
                /* justify-content: space-around; */
                /* justify-content: space-between; */
                
                /* align-items: center; */
                /* align-items: flex-end; */
                /* align-items: flex-start; */


                align-content: center;
                /* align-content: space-around; */
                /* align-content: space-between; */
            }
            span {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!-- 弹性布局 -->
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>

        <div>
            <span>7</span>
            <span>8</span>
            <span>9</span>
        </div>
        <!-- 给父级添加弹性布局--控制子盒子的位置和排序方式 -->
        <!-- 常用属性 -->
        <!-- 对子盒子的x轴方向的设置 justify-content-->
        <!-- flex-start：开头；flex-end：结尾；center: 居中；-->

        <!-- 对子盒子的y轴方向的设置--align-items -->
        <!-- 同上 -->

        <!-- 多行y轴--item-contents /align-content-->
        <!-- space-around：平分空间(开头结尾留空间)；space-between: 平分空间(开头结尾不留空间) -->
    </body>
</html>